<style include="cr-shared-style">
:host {
  --focus-border-width: 1px;
}
.navigation-item {
  --active-shadow-rgb: transparent; /* Disable Active Shadow on cr-button */
  --focus-shadow-color: transparent; /* Disable Focus Shadow on cr-button */
  --hover-bg-color: var(--cros-ripple-color);
  --ripple-opacity: 0; /* Disable Ripple on cr-button */

  align-items: center;
  border-block-end-width: var(--focus-border-width);
  border-block-start-width: var(--focus-border-width);
  border-color: transparent;
  border-inline-end-width: var(--focus-border-width);
  border-inline-start-width: 0;
  border-radius: 0 20px 20px 0;
  border-style: solid;
  color: var(--cros-text-color-primary);
  cursor: pointer;
  display: flex;
  font-weight: 500;
  justify-content: start;
  margin-bottom: 8px;
  margin-inline-end: 2px;
  min-height: 32px;
  padding-inline-start: 20px;
}

.navigation-item:focus-visible {
  outline: var(--cros-focus-ring-color) solid var(--focus-border-width);
}

.navigation-item.selected {
  background-color: var(--cros-highlight-color);
  color: var(--cros-color-prominent);
}

:host-context(body.jelly-enabled) .navigation-item.selected {
  /* TODO(276493287): Remove cros-highlight-color fallback after jelly colors
                      launches. */
  background-color: var(--cros-sys-highlight_shape);
}

iron-icon {
  --iron-icon-fill-color: var(--cros-icon-color-primary);
  --iron-icon-height: 20px;
  --iron-icon-width: 20px;
  margin-inline-end: 16px;
  pointer-events: none;
  vertical-align: top;
}

.navigation-item.selected > iron-icon {
  --iron-icon-fill-color: var(--cros-icon-color-prominent);
}

cr-expand-button {
  padding-inline-start: 20px;
}

#navigationSelectorMenu {
  position: relative;
  top: var(--focus-border-width, 0);
}

</style>

<div id="navigationSelectorComponent">
  <div id="navigationSelectorMenu">
    <template id="selectorItems" is="dom-repeat" items="{{selectorItems}}">
        <cr-button class$="{{computeInitialClass_(item)}}" tabindex="0"
            part="navigation-item"
            on-click="onSelected_">
          <iron-icon class="icon" icon="[[item.icon]]"
            alt="" hidden="[[!item.icon]]"></iron-icon>
          [[item.name]]
        </cr-button>
    </template>
  </div>
</div>
